import React, { Component } from 'react'
import RouterView from '@/router/index'
import styled from 'styled-components';
import LeftNav from './components/LeftNav'
import { getUrlIdentity } from '@/utils/api/api'

import ImageView from '@/components/imageView'


const HeaderWrapper = styled.header`
  width: 100vw;
  height: 60px;
  line-height: 60px;
  /* text-align:center; */
  background: lightblue;
`

const HomeIndexWrapper = styled.div`
  width: 100vw;
  height: calc(100vh - 60px);
  display:flex;
  .left {
    flex:3;
    border-right: 1px solid red;
  }
  .right {
    flex:7;
    background:#ccc;
  }
`

const ImgBox = styled.div`
 width: 50px;
    height: 50px;
    position: fixed;
    right: 20px;
    top: 0;
    margin-top: 5px;
`

export default class HomeIndex extends Component {
  state = {
    leftUrl: []
  }
  render() {
    const { leftUrl } = this.state;
    return (
      <div>
        <HeaderWrapper className="header">
          我是头部
          <ImgBox>
            <ImageView
              round={true}
              imgClick={() => {
                sessionStorage.removeItem('token')
                this.props.history.replace('/login')
              }}
            />
          </ImgBox>

        </HeaderWrapper>
        <HomeIndexWrapper>
          <div className="left">
            <LeftNav leftUrl={leftUrl}></LeftNav>
          </div>
          <div className="right">
            homeIndex
          <RouterView routes={this.props.routes}></RouterView>
          </div>
        </HomeIndexWrapper>
      </div>
    )
  }

  componentDidMount() {
    getUrlIdentity().then(res => {
      console.log('ite', res)
      this.setState({
        leftUrl: res.data
      })
    })
  }

}
